import React from 'react';
import { inject, observer } from 'mobx-react';
import {
  WeaTop,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaNewScroll,
  WeaLocaleProvider,
} from 'ecCom';
import CatalogContent from './catalog/CatalogContent';
import { toJS } from 'mobx';

const getLabel = WeaLocaleProvider.getLabel;
@inject('docCatalogStore')

@observer
class Catalog extends React.Component {
  componentDidMount() {
    const { docCatalogStore } = this.props;
    const { getCondition, getCategoryNum, getDocNum
      , getMostCategory, getReportData } = docCatalogStore;
    getCondition();
    getCategoryNum();
    getDocNum();
    getMostCategory();
    getReportData();
  }
  componentWillReceiveProps() {
  }
  componentWillUnmount() {
  }
  onRightMenuClick() {
    const Arr = [];
    return Arr;
  }
  getRightMenu() {
    const Arr = [
      {
        key: '1',
        icon: <i className="icon-coms-Collection" />,
        content: getLabel(28111, '收藏'),
      },
      {
        key: '2',
        icon: <i className="icon-coms-help" />,
        content: getLabel(275, '帮助'),
      },
    ];
    return Arr;
  }
  getButtons() {
    const Arr = [];
    return Arr;
  }
  formatter = (params) => {
    if (params.indexOf('/')) {
 var newParamsName = ''; 
}// 最终拼接成的字符串
    let paramsNameNumber = params.length;// 实际标签的个数
    let provideNumber = 8;// 每行能显示的字的个数
    let rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
    /**
     * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
     */
    // 条件等同于rowNumber>1
    if (paramsNameNumber > provideNumber) {
      /** 循环每一行,p表示行 */
      for (let p = 0; p < rowNumber; p++) {
        let tempStr = '';// 表示每一次截取的字符串
        let start = p * provideNumber;// 开始截取的位置
        let end = start + provideNumber;// 结束截取的位置
        // 此处特殊处理最后一行的索引值
        if (p == rowNumber - 1) {
          // 最后一次不换行
          tempStr = params.substring(start, paramsNameNumber);
        } else {
          // 每一次拼接字符串并换行
          tempStr = `${params.substring(start, end)}\n`;
        }
        newParamsName += tempStr;// 最终拼成的字符串
      }
    } else {
      // 将旧标签的值赋给新标签
      newParamsName = params;
    }
    // 将最终的字符串返回
    return newParamsName;
  }

  render() {
    const { docCatalogStore } = this.props;
    const { title, reportData, loadingChart, loadingCN
      , loadingDN, loadingMC, loading } = docCatalogStore;
    const loadingNow = loading || loadingChart || loadingCN || loadingDN || loadingMC;
    // 图表_初始化数据
    let ydata = [];
    let xdata = [];
    if (toJS(reportData).data) {
      toJS(reportData).data.forEach((item, ind) => {
          ydata.push(item.docSum);
          let tempdata = item.subcategory.split('\/');
          tempdata[tempdata.length - 1] = this.formatter(tempdata[tempdata.length - 1]);
          item.subcategory = tempdata.join('\/');
          xdata.push(item.subcategory);
      });
    }
    return (
      <div className="wea-doc-count">
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@tqor58`} datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@xjlipu`}
            title={title}
            loading={loadingNow}
            icon={<i className="icon-coms-doc" />}
            iconBgcolor="#df583a"
            buttons={this.getButtons()}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenu()}
            onDropMenuClick={this.onRightMenuClick}
          >
            <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@bqaft0`} height={'100%'}>
              <CatalogContent ecId={`${this && this.props && this.props.ecId || ''}_CatalogContent@jxxjnf`} ydata={ydata} xdata={xdata} />
            </WeaNewScroll>
          </WeaTop>
        </WeaRightMenu>
      </div>
    );
  }
}
export default WeaTools.tryCatch(React,
  props => <WeaErrorPage ecId={`${this && this.props && this.props.ecId || ''}_WeaErrorPage@223jyv`} msg={props.error ? props.error : getLabel(385218, '对不起，该页面异常，请联系管理员！')} />,
  { error: '' },
)(Catalog);

